<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="static/css/style.css">
<link rel="stylesheet" href="static/css/weui.min.css">
<link rel="stylesheet" href="static/css/jquery-weui.min.css"> 
<link rel="stylesheet" href="static/css/mailList2.css"> 
<script type="text/javascript" src="static/js/jquery-3.2.1.min.js" charset="UTF-8"></script>
</head>
<body class="gray-bg">
	<div id="indexPage">
		<div class="bar bar-nav weui-search-bar" id="searchBar">
			<div class="weui-cell__bd">
						      	<img style="height: 29px;width: 29px;" src="static/img/qz.png"><strong>通讯录</strong>
						    </div>
		  	<!-- <form class="weui-search-bar__form">
			    <div class="weui-search-bar__box">
			      	<i class="weui-icon-search"></i>
			      	<input type="input" class="weui-search-bar__input" id="searchInput"  placeholder="搜索" >
			      	<a href="javascript:" class="weui-icon-clear" id="searchClear"></a>
			    </div>
		  	</form> -->
	  		<!-- <a href="javascript:" class="weui-search-bar__cancel-btn" id="searchCancel">取消</a> -->
		</div>
		<!-- <div class="bar bar-footer pull-right">
	        <span class="sels">提交</span>
	        <span>取消</span>
	        <span class="sel-btn">已选择: <strong>0</strong>人</span>
	        <a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_primary">确认</a>
	        <a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_default">取消</a>
		</div> -->
		<div class="content sel-con">
		    <div class="weui-cells weui-cells_checkbox">
		    	<div class="list-item">
				  	<label class="weui-cell weui-check__label all-input">
					    <div class="weui-cell__hd">
					      	<input type="checkbox" name="checkbox" class="weui-check">
					      	<i class="weui-icon-checked"></i>
					    </div>
					    <div class="weui-cell__bd">
					      	<p>全选</p>
					    </div>
				  	</label>
		    	</div>
		    	<h3 class="list-item-tit">群组</h3>
		    	<div class="list-item1">

		    	</div>
		    	<div class="list-item2">
		    		<!-- <div class="list-item-box">
			    		<h3 class="list-item-tit">A</h3>
					  	<label class="weui-cell weui-check__label item-input">
			      			<div class="weui-cell__hd">
						      	<input type="checkbox" name="checkbox" class="weui-check" peoId="1">
						      	<i class="weui-icon-checked"></i>
						    </div>
						    <div class="weui-cell__bd touxiang">
						      	<img src="static/img/tx.png">
						    </div>
						    <div class="weui-cell__bd">
						      	<p>姓名1</p>
						    </div>
						    <div class="weui-cell__ft">教学部</div>
						</label>
		    		</div>
		    		<div class="list-item-box">
			    		<h3 class="list-item-tit">B</h3>
					  	<label class="weui-cell weui-check__label item-input">
			      			<div class="weui-cell__hd">
						      	<input type="checkbox" name="checkbox" class="weui-check" peoId="16">
						      	<i class="weui-icon-checked"></i>
						    </div>
						    <div class="weui-cell__bd touxiang">
						      	<img src="static/img/tx.png">
						    </div>
						    <div class="weui-cell__bd">
						      	<p>姓名16</p>
						    </div>
						     <div class="weui-cell__ft">教学部</div>
						</label>
		    		</div> -->
		    	</div>
			</div>
		</div>
	</div>
	<div id="selectPage" class="weui-popup__container">
		<div class="weui-popup__overlay"></div>
		<div class="weui-popup__modal">
			<header class="bar bar-nav">
				<a href="javascript:void(0)" class="back-btn close-popup">返回</a>
			    <h3 class="show-peo-num">已选择<strong></strong>人</h3>
            </header>
            <div class="content">
			<!-- 	<div class="list-con yxzr" style="padding-left: 0;background: #fff;">
					<label class="weui-cell weui-check__label" id="17">
					    <div class="weui-cell__bd touxiang">
					      	<img src="img/tx.png">
					    </div>
					    <div class="weui-cell__bd">
					      	<p>姓名2</p>
					    </div>
					    <div class="weui-cell__ft">教学部<i class="weui-icon-cancel" style="margin-top: -3px; color:#b3b3b3"></i></div>
					</label>
				</div>
            	 -->
            </div>
		</div>	
	</div>
	<div id="seachPage" class="weui-popup__container">
		<div class="weui-popup__overlay"></div>
		<div class="weui-popup__modal">
			<div class="bar bar-nav weui-search-bar" id="searchBar">
			  	<form class="weui-search-bar__form">
				    <div class="weui-search-bar__box">
				      	<i class="weui-icon-search weui-search-btn"></i>
				      	<input type="seach" class="weui-search-bar__input" peoId="searchInputs" placeholder="搜索" >
				      	<a href="javascript:" class="weui-icon-clear" id="searchClear"></a>
				    </div>
			  	</form>
		  		<!-- <a href="javascript:" class="weui-search-bar__cancel-btn" id="searchCancel">取消</a> -->
			</div>
            <div class="content seach-con">
				<div class="weui-cells weui-cells_checkbox list-con" style="padding-left: 0;">
				</div>
            </div>
		</div>	
	</div>
	<script id="list_tpl" type="text/x-dot-template">

       {{for(var i = 0; i < it.childList.length; i ++){ }}
       		<div class="list-item1-box">
			  	<label class="weui-cell weui-check__label items-input" z-indexs="1">
				    <div class="weui-cell__hd">
				      	<input type="checkbox" name="checkbox" class="weui-check" peoId='{{=it.childList[i].id}}'>
				      	<i class="weui-icon-checked"></i>
				    </div>
				    <div class="weui-cell__bd">
				      	<p>{{=it.childList[i].name}}</p>
				    </div>
				    <i class="icon-arrow-l icons-btn rotate"></i>
			  	</label>
	    		<div class="list-con animete none">
	    			{{for(var j = 0; j < it.childList[i].childList.length; j ++){ }}
						<div class="list-item1-box">
						  	<label class="weui-cell weui-check__label items-input" z-indexs="2">
							    <div class="weui-cell__hd">
							      	<input type="checkbox" name="checkbox" class="weui-check" peoId='{{=it.childList[i].childList[j].id}}'>
							      	<i class="weui-icon-checked"></i>
							    </div>
							    <div class="weui-cell__bd">
							      	<p>{{=it.childList[i].childList[j].name}}</p>
							    </div>
							    <i class="icon-arrow-l icons-btn rotate"></i>
						  	</label>
				    		<div class="list-con animete none">
				    			{{for(var h = 0; h < it.childList[i].childList[j].childList.length; h ++){ }}
				    				<div class="list-item1-box">
									  	<label class="weui-cell weui-check__label items-input" z-indexs="3">
										    <div class="weui-cell__hd">
										      	<input type="checkbox" name="checkbox" class="weui-check" peoId='{{=it.childList[i].childList[j].childList[h].id}}'>
										      	<i class="weui-icon-checked"></i>
										    </div>
										    <div class="weui-cell__bd">
										      	<p>{{=it.childList[i].childList[j].childList[h].name}}</p>
										    </div>
										    <i class="icon-arrow-l icons-btn rotate"></i>
									  	</label>
							    		<div class="list-con animete none">
							    			{{for(var e = 0; e < it.childList[i].childList[j].childList[h].userList.length; e ++){ }}
							    				<label class="weui-cell weui-check__label item-input">
										  			<div class="weui-cell__hd">
												      	<input type="checkbox" name="checkbox" class="weui-check" peoId='{{=it.childList[i].childList[j].childList[h].userList[e].id}}'>
												      	<i class="weui-icon-checked"></i>
												    </div>
												    <div class="weui-cell__bd touxiang">
												      	<img src="static/img/tx.png">
												    </div>
												    <div class="weui-cell__bd">
												      	<p>{{=it.childList[i].childList[j].childList[h].userList[e].realName}}</p>
												    </div>
												    <div class="weui-cell__ft">{{=it.childList[i].name}}</div>
												</label>	
							    			{{ } }}
							    		</div>
							    	</div>
				    			{{ } }}
				    			{{for(var h = 0; h < it.childList[i].childList[j].userList.length; h ++){ }}
									<label class="weui-cell weui-check__label item-input">
							  			<div class="weui-cell__hd">
									      	<input type="checkbox" name="checkbox" class="weui-check" peoId='{{=it.childList[i].childList[j].userList[h].id}}'>
									      	<i class="weui-icon-checked"></i>
									    </div>
									    <div class="weui-cell__bd touxiang">
									      	<img src="static/img/tx.png">
									    </div>
									    <div class="weui-cell__bd">
									      	<p>{{=it.childList[i].childList[j].userList[h].realName}}</p>
									    </div>
									    <div class="weui-cell__ft">{{=it.childList[i].name}}</div>
									</label>	
				    			{{ } }}
				    		</div>
    					</div>
	    			{{ } }}
	    			{{for(var j = 0; j < it.childList[i].userList.length; j ++){ }}
	    				<label class="weui-cell weui-check__label item-input">
				  			<div class="weui-cell__hd">
						      	<input type="checkbox" name="checkbox" class="weui-check" peoId='{{=it.childList[i].userList[j].id}}'>
						      	<i class="weui-icon-checked"></i>
						    </div>
						    <div class="weui-cell__bd touxiang">
						      	<img src="static/img/tx.png">
						    </div>
						    <div class="weui-cell__bd">
						      	<p>{{=it.childList[i].userList[j].realName}}</p>
						    </div>
						    <div class="weui-cell__ft">{{=it.childList[i].name}}</div>
						</label>
	    			{{ } }}
		      	</div>
    		</div>
        {{ } }}

        {{for(var i = 0; i < it.userList.length; i ++){ }}
	        <label class="weui-cell weui-check__label item-input">
	  			<div class="weui-cell__hd">
			      	<input type="checkbox" name="checkbox" class="weui-check" peoId='{{=it.userList[i].id}}'>
			      	<i class="weui-icon-checked"></i>
			    </div>
			    <div class="weui-cell__bd touxiang">
			      	<img src="static/img/tx.png">
			    </div>
			    <div class="weui-cell__bd">
			      	<p>{{=it.userList[i].realName}}</p>
			    </div>
			    <div class="weui-cell__ft">{{=it.childList[i].name}}</div>
			</label>
        {{ } }}
    </script>
    <script id="list_tpl1" type="text/x-dot-template">
    {{~it:val:key}}

    	<div class="list-con yxzr" style="padding-left: 0;background: #fff;">
			<label class="weui-cell weui-check__label" peoId="{{=val.id}}">
			    <div class="weui-cell__bd touxiang">
			      	<img src="static/img/tx.png">
			    </div>
			    <div class="weui-cell__bd">
			      	<p>{{=val.fullname}}</p>
			    </div>
			    <div class="weui-cell__ft">
			    	<i class="weui-icon-cancel"  peoId="{{=val.id}}" style="margin-top: -3px; color:#b3b3b3"></i>
			    </div>
			</label>
		</div>
    
 	{{~}}
    </script>
    <script id="list_tpl2" type="text/x-dot-template">

       {{for(var prop in it) {  }}
       		<div class="list-item-box">
			  	<h3 class="list-item-tit">{{=prop}}</h3>
	    			{{for(var j = 0; j < it[prop].length; j ++){ }}
						<label class="weui-cell weui-check__label item-input">
							<div class="weui-cell__hd">
							      	<input type="checkbox" name="checkbox" class="weui-check" peoId="{{=it[prop][j].id}}">
						      	<i class="weui-icon-checked"></i>
						    </div>
						    <div class="weui-cell__bd touxiang">
						      	<img src="static/img/tx.png">
						    </div>
						    <div class="weui-cell__bd">
						      	<p>{{=it[prop][j].realName}}</p>
						    </div>
						    <div class="weui-cell__ft">{{=it[prop][j].deptName }}</div>
						</label>
				    {{ } }}
    		</div>
	    {{ } }}
    </script>
	<script>
	var jsonStr = '${message}';
	var userJson = '${userList}';
		// 判断是否为pc还是移动端。true为移动端
    	function detectmob() {  
            if( navigator.userAgent.match(/Android/i)  
            || navigator.userAgent.match(/webOS/i)  
            || navigator.userAgent.match(/iPhone/i)  
            || navigator.userAgent.match(/iPad/i)  
            || navigator.userAgent.match(/iPod/i)  
            || navigator.userAgent.match(/BlackBerry/i)  
            || navigator.userAgent.match(/Windows Phone/i)  
            ){  
                return true;  
            }  
            else {  
                return false;  
            }  
        }  
        if(!detectmob()) {
        	$("#selectPage").removeClass('weui-popup__container');
        	$("#selectPage .weui-popup__modal").css({
        		"-webkit-transform": "none",
        		"-moz-transform": "none",
        		"-ms-transform": "none",
        		"transform": "none"
        	})
        	$("#seachPage").css({
        		"z-index": 120 
        	})
        	$("#selectPage .weui-popup__overlay").addClass('hide');
        	$(".sel-btn,.back-btn").addClass('hide');
        	$(".gray-bg").css({
        		"position":"relative",
        		"width": 600,
        		"height": 500,
        		"margin": "auto"
        	})
        	$("#indexPage").css({
        		"width": 290
        	})
        	$("#selectPage").css({
        		"width": 290,
        		"position": "absolute",
        		"height": "100%",
        		"top":0,
        		"right":0
        	})
        }
	</script>
	
	<script src="static/js/jquery-weui.js"></script>
	<script src="static/js/icheck.min.js"></script>
	<script src="static/js/doT.min.js"></script>
	<script src="static/js/mailList2.js"></script>

 
   



</body>
</html>